<template>
	<view class="my">
		<view class="avator-div">
			<image class="avator" :src="loginStatus ? userInfo.imgUrl:'../../static/defalt.jpg'"></image>
			<view class="avator-msg">
				<view class="top">
					{{ loginStatus ? userInfo.nickName : "用户名称"   }}
				</view>
				<text class="bottom">
					成长值0
				</text>
			</view>
		</view>
		<view class="other-div">
			<view class="reset-money" @click="toBalance">
				<view class="">
					0.00
				</view>
				<view class="txt">
					余额
				</view>
			</view>
			<view class="reset-money">
				<view class="">
					0.00
				</view>
				<view class="txt">
					优惠券
				</view>
			</view>
			<view class="reset-money">
				<view class="">
					0.00
				</view>
				<view class="txt">
					积分
				</view>
			</view>
			<view class="reset-money">
				<view class="">
					0.00
				</view>
				<view class="txt">
					卡
				</view>
			</view>
			<view class="reset-money">
				<view class="">
					0.00
				</view>
				<view class="txt">
					零钱
				</view>
			</view>
		</view>
		<view class="order-dev">
			<view class="my-order">
				<text>我的订单</text>
				<view class="check-order">
					<text @click="checkOrder()">查看全部订单</text>
					<text class="iconfont icon-youjiantou">
					</text>
				</view>
			</view>
			<LineBorder></LineBorder>
			<view class="item-out">
				<view class="item" v-for="(i,j) in orderList" :key="j" @click="toOrder(i.id)">
					<view class="iconfont" :class="i.icon">
					</view>
					<view class="txt">
						{{i.name}}
					</view>
				</view>
			</view>

		</view>

		<view class="three-div">
			<view class="item" v-for="(i,j) in otherData" :key="j">
				<view class="item-left" @click="toItem(i.url)">
					<view :class="i.icon" class="iconfont">
					</view>
					<view class="txt">
						{{i.name}}
					</view>
				</view>
				<view class="iconfont icon-youjiantou" @click="toItem(i.url)">
				</view>
			</view>
		</view>
		<Tabbar cureentPage='my'></Tabbar>
	</view>
</template>

<script>
	import LineBorder from '@/components/common/LineBorder.vue';
	import Tabbar from '@/components/common/Tabbar.vue';
	import {
		mapState,
	} from 'vuex'

	export default {
		data() {
			return {
				orderList: [{
					name: "待付款",
					icon: "icon-daifukuan",
					id: 1
				}, {
					name: "待发货",
					icon: "icon-wuliu",
					id: 2
				}, {
					name: "待收货",
					icon: "icon-wuliu",
					id: 3
				}, {
					name: "待评价",
					icon: "icon-31daipingjia",
					id: 4
				}, {
					name: "退款/售后",
					icon: "icon-tuikuan",
				}],
				otherData: [{
					name: "购物车",
					icon: "icon-gouwuche",
					url: '/pages/cart/cart'
				}, {
					name: "任务中心",
					icon: "icon-renwuzhongxin",
					url: '/pages/missionCenter/missionCenter'
				}, {
					name: "收货地址",
					icon: "icon-shinshopshouhuodizhi",
					url: '/pages/deliveryAddress/deliveryAddress'
				}, {
					name: "个人信息",
					icon: "icon-geren",
					url: '/pages/personalInfo/personalInfo'
				}]
			};
		},
		components: {
			LineBorder,
			Tabbar
		},
		computed: {
			...mapState({
				loginStatus: state => state.user.loginStatus,
				userInfo: state => state.user.userInfo
			})
		},
		onReady() {
			console.log(this.userInfo, this.loginStatus, 'userInfo');
		},
		methods: {
			checkOrder() {
				uni.navigateTo({
					url: '/pages/orderList/orderList'
				})
			},
			toOrder(id) {
				if (id) {
					uni.navigateTo({
						url: '/pages/orderList/orderList?id=' + id
					})
				} else {
					uni.navigateTo({
						url: '/pages/refund/refund'
					})
				}
			},
			toItem(url) {
				uni.navigateTo({
					url: url
				})
			},
			toBalance() {
				uni.navigateTo({
					url: '/pages/myBalance/myBalance'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my {
		background-color: #FAFAF9;
	}

	.avator-div {
		height: 280rpx;
		display: flex;
		align-items: center;
		background-color: #CDAB84;

		.avator {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin: 0 20rpx;
		}

		.avator-msg {
			.top {
				font-size: $uni-font-size-lg;
			}

			.bottom {
				font-size: $uni-font-size-sm;
				background-color: #3A332D;
				border-radius: 20rpx;
				color: #F1DAB9;
				padding: 6rpx 14rpx;
			}
		}
	}

	.order-dev,
	.other-div,
	.three-div {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin: 26rpx;
	}

	.other-div {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.reset-money {
			display: flex;
			align-items: center;
			flex-direction: column;

			.txt {
				color: $txt-color;
				font-size: $uni-font-size-sm;
			}
		}

	}

	.order-dev {

		.my-order {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx 0;

			.check-order {
				color: $txt-color;
			}
		}

		.item-out {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;

			.iconfont {
				font-size: 70rpx;
				padding-bottom: 20rpx;
			}

			.item {
				display: flex;
				align-items: center;
				flex-direction: column;
			}
		}
	}

	.three-div {
		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;
			border-bottom: solid 1px $border-line;

			.item-left {
				display: flex;
				align-items: center;

				.txt {
					padding-left: 20rpx;
				}
			}

			.icon-youjiantou {
				color: $txt-color;
			}
		}
	}
</style>
